<template>
	<!-- 店铺 编辑 -->
	<view class="user">
		<view class="user_img flex-cb user_image" @click="handlehead(1)">
			<text>头像</text>
			<view class="img flex align-center">
				<image :src="logo?logo:user.avatar" mode="" style="border-radius: 50%;"></image>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="user_img flex-cb user_name" @click="handlenlist(1,'店铺名称')">
			<text>店铺名称</text>
			<view class="img flex align-center">
				<text class="text">{{user.shop_name}}</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="user_img flex-cb user_name">
			<text>店铺区域地址</text>
			<picker mode="region" @change="handleRange">
				<view class="img flex align-center">
					<text class="text">{{user.shop_province + user.shop_city + user.shop_district}}</text>
					<text class="cuIcon-right"></text>
				</view>
			</picker>

		</view>
		<view class="user_img flex-cb user_name" @click="handlenlist(2,'店铺详细地址')">
			<text>店铺详细地址</text>
			<view class="img flex align-center">
				<text class="text">{{user.shop_address}}</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="user_img flex-cb user_name" @click="handlenlist(3,'联系人')">
			<text>联系人</text>
			<view class="img flex align-center">
				<text class="text">{{user.contact_person}}</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="user_img flex-cb user_name" @click="handlenlist(4,'联系方式')">
			<text>联系方式</text>
			<view class="img flex align-center">
				<text class="text">{{user.contact_phone}}</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="user_img flex-cb user_image" @click="handlehead(2)">
			<text>图片</text>
			<view class="img flex align-center">
				<image :src="pic?pic:user.shop_cover" mode="" style="border-radius: 10rpx;"></image>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view url="./text" class="user_img flex-cb user_phone" @click="handlenlist(5,'店铺简介')">
			<text>店铺简介</text>
			<view class="img flex align-center">
				<text class="text">{{user.shop_intro}}</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="modal_img  " v-if="isshow">
			<view class="button1 flex-c" @click="handleimg">相册</view>
			<view class="button1 button2 flex-c" @click="handlehead">取消</view>
		</view>
		<view class="button flex-c" @click="baocun">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: 0,
				islogo: 0,
				user: '',
				logo: '',
				pic: '',
			};
		},
		onLoad(e) {
			this.user = uni.getStorageSync('user')
			// this.user = JSON.parse(decodeURIComponent(e.user))
			// let loge_img = this.user.avatar.split('/')
			// let pic_img = this.user.shop_cover.split('/')
			// this.logo = 'images/' + loge_img[loge_img.length - 1]
			// this.pic = 'images/' + pic_img[pic_img.length - 1]
			// this.user.avatar = this.$base + this.user.avatar
			// this.user.shop_cover = this.$base + this.user.shop_cover
			console.log(this.user, 1111);
		},
		methods: {
			handleRange(e) {
				this.user.shop_province = e.detail.value[0]
				this.user.shop_city = e.detail.value[1]
				this.user.shop_district = e.detail.value[2]
				this.$api.merchant_address({
					shop_province: this.user.shop_province,
					shop_city: this.user.shop_city,
					shop_district: this.user.shop_district,
					shop_address: this.user.shop_address,
				}, true).then(res => {
					if (res.code == 200001) console.log('修改成功');
				})
			},
			handlehead(i) {
				this.isshow = !this.isshow
				if (i == 1) {
					this.islogo = 1
				} else {
					this.islogo = 0
				}
			},
			handleimg() { //点击相册
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// uni.showLoading({
						// 	title: '正在上传',
						// 	mask: true
						// });
						this.isshow = 0
						this.$api.upImage(res.tempFilePaths[0]).then(Res => {
							console.log(Res, '++++');
							if (this.islogo == 0) { //店铺图片
								this.pic = this.$base + Res
								console.log(this.pic, '----');
								this.$api.merchant_cover({
									shop_cover: Res
								}, true).then(res => {
									if (res.code == 200001) this.$utils.showTips('修改成功')
								})
							}
							if (this.islogo == 1) { //店铺logo
								this.logo = this.$base + Res
								this.$api.merchant_avater({
									avatar: Res
								}, true).then(res => {
									console.log(res, '修改成功');
									if (res.code == 200001) this.$utils.showTips('修改成功')
								})
							}
						});
					}
				});
			},
			handlenlist(i, t) {
				// uni.showModal({
				// 	title: '提示',
				// 	content: '这是一个模态框！',
				// 	editable: true,
				// 	placeholderText: '显示输入框',
				// });
				uni.showModal({
					confirmColor:'#1CD699',
					editable:true,
					title:'修改' + t,
					placeholderText:'请输入新的' + t,
					success:(res)=>{
						if (res.confirm) {
							if(res.content == ''){
								this.$utils.showTips('请输入新的' + t)
							}else{
								if(i == 1){//店铺名称
									this.user.shop_name = res.content
									this.$api.merchant_name({
										shop_name:res.content
									},true).then(res=>{
										if(res.code == 200001) console.log('修改成功');
									})
								}else if(i == 2){//店铺详细地址
									this.user.shop_address = res.content
									this.$api.merchant_address({
										shop_province:this.user.shop_province,
										shop_city:this.user.shop_city,
										shop_district:this.user.shop_district,
										shop_address:res.content,
									},true).then(res=>{
										if(res.code == 200001) console.log('修改成功');
									})
								}else if(i == 3){//联系人
									this.user.contact_person = res.content
									this.$api.merchant_person({
										contact_person:res.content
									},true).then(res=>{
										if(res.code == 200001) console.log('修改成功');
									})
								}else if(i == 4){//联系方式
									this.user.contact_phone = res.content
									this.$api.merchant_phone({
										contact_phone:res.content
									},true).then(res=>{
										if(res.code == 200001) console.log('修改成功');
									})
								}else{//店铺简介
									this.user.shop_intro = res.content
									this.$api.merchant_intro({
										shop_intro:res.content
									},true).then(res=>{
										if(res.code == 200001) console.log('修改成功');
									})
								}
							}

						}
					}

				})
			},
			baocun() {
				this.$utils.showTips('修改成功')
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.user {
		background-color: #fff;
		width: 100vh;
		height: 100vh;

		.user_img {
			height: 120rpx;
			width: 710rpx;
			margin-left: 20rpx;
			padding-left: 22rpx;
			border-bottom: #EBEBEB solid 1rpx;
			font-size: 26rpx;
			color: #666;
			padding-bottom: 30rpx;

			.img {
				image {
					width: 100rpx;
					height: 100rpx;
					margin-right: 33rpx;
				}

				.cuIcon-right {
					margin-right: 23rpx;
				}
			}

		}

		.user_image {
			height: 140rpx;
			padding: 20rpx 0;
			padding-left: 22rpx;
		}

		.user_name,
		.user_phone {
			height: 100rpx;
			padding-bottom: 0;
		}

		.user_name {
			.text {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-right: 20rpx;
			}
		}

		.user_phone {
			.phone {
				color: #333;
				font-size: 30rpx;
				font-weight: bold;
				margin-right: 12rpx;
			}
		}

		.foot {
			width: 120rpx;
			height: 42rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #1CD699;
			margin-left: 42rpx;
			margin-top: 30rpx;
		}
	}

	.modal_img {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		position: fixed;
		left: 0;
		top: 0;

		.button1 {
			width: 710rpx;
			height: 116rpx;
			margin: auto;
			margin-bottom: 26rpx;
			background: #FFFFFF;
			border-radius: 14px 14px 14px 14px;
			filter: blur(undefinedpx);
			color: #1CD699;
			position: absolute;
			bottom: 158rpx;
			left: 21rpx;
		}

		.button2 {
			color: #000;
			bottom: 26rpx;
		}
	}

	.button {
		width: 710rpx;
		height: 116rpx;
		background: #1CD699;
		border-radius: 58rpx;
		margin: 80rpx 20rpx;
		color: #fff;
	}
</style>
